<template>
	<view class="tabs flex">
		<view class="tab" @tap="$emit('change',index)" :style="{width:100/tabs.length+'%'}" :class="index==currentActive?'tab-active':''" v-for="(item,index) in tabs" :key="item.name">{{item.name}}</view>
		<view class="tab-select-bg" :style="{width:100/tabs.length+'%',transform:'translateX('+100*currentActive+'%)'}"></view>
	</view>
</template>

<script>
	export default {
		name:"stockTab",
		props:{
			tabs:{
				type:Array,
				required:true
			},
			currentActive:{
				type:Number,
				required:true
			},
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.tabs{
	position: relative;
	height:45rpx;
	background-color: rgb(209,233,254);
	.tab{
		position: relative;
		height: 100%;
		font-size: 24rpx;
		color: #333;
		text-align: center;
		line-height: 45rpx;
		z-index: 10;
	}
	.tab-active{
		color: #fff;
	}
	.tab-select-bg{
		position: absolute;
		left: 0;
		height: 100%;
		top: 0;
		background-color:rgb(65,157,239);
		transition: all .3s ease;
	}
}
</style>
